<style lang="scss" scoped>
    .address{
        height: 100vh;
        background-color: #f5f5f5;
        .list{
            padding: 15px 4%;
            box-sizing: border-box;
            height: calc(100vh - 110px);
            overflow-y: auto;
        }
    }
</style>
<template>
    <div class="address">
        <navigator 
            :back="true"
            :title="'收货地址'"
        />
        <!-- 列表区域 -->
        <div class="list">
            <van-address-list
                v-model="chosenAddressId"
                :list="list"
                default-tag-text="默认"
                @add="$router.push('/addressadd')"
                @select="selectAddress"
                @edit="edit"
            />
        </div>
    </div>
</template>
<script>
import navigator from '@/components/navigator.vue';
// 引入获取收货列表接口
import {
    getAddressList,
    editAddress
} from '@/api'
export default {
    // 先获取数据
    methods: {
        edit(item){
            // 跳转编辑页面 动态路由
            this.$router.push('/editAddress/'+item.id)
        },
        selectAddress(item){
            item.is_select = 1;
            // 直接调用修改地址的方法
            editAddress(item).then(res => {
                // 如果修改成功
                if(res.data.code == 1){
                    this.$notify({ 
                        type: 'success', 
                        message: '修改成功' 
                    });
                    // 重新调用获取地址列表的接口
                    this.getList();
                }
            })
        },
        getList(){
            getAddressList().then(res => {
                console.log(res.data);
                // 后端数据赋值给 前端
                if(res.data.code == 1){
                    this.list = res.data.result.map(item => {
                        let obj = {
                            name: item.name,
                            tel: item.phone,
                            address: 
                                item.a_provice + 
                                item.a_city + 
                                item.a_code + 
                                item.a_desc,
                            isDefault: Boolean(item.is_select),
                            phone: item.phone,
                            id: item.ID,
                            address_id: item.ID,
                            a_provice: item.a_provice,
                            a_city: item.a_city,
                            a_code: item.a_code,
                            a_desc: item.a_desc,
                            is_select: item.is_select
                        }
                        return obj
                    });
                    // 默认选中id
                    this.chosenAddressId = this.list.length > 0 ? this.list[0].id : null;
                }
            })
        }
    },
    // 创建后
    created(){
        this.getList();
    },
    data() {
        return {
            list: [],
            chosenAddressId: null
        }
    },
    components : {
        navigator
    }
}
</script>